<template>
  <div class="margin-bottom-sm">
    <v-card
            class="mx-auto"
            max-width="344"
    >
      <v-img
              src="https://img-blog.csdnimg.cn/20210527170731995.jpg"
              height="200px"
      ></v-img>

      <v-card-title>
        {{dailySentence.sentence}}
      </v-card-title>

      <v-card-subtitle>
        {{dailySentence.translation}}
      </v-card-subtitle>

      <v-card-actions>
        <v-btn
                color="orange lighten-2"
                text
        >
          今日任务
        </v-btn>

        <v-spacer></v-spacer>

        <v-btn
                icon
                @click="show = !show"
        >
          <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
        </v-btn>
      </v-card-actions>

      <v-expand-transition>
        <div v-show="show">
          <v-divider></v-divider>

          <v-card-text>
            {{dailySentence.description}}
          </v-card-text>
        </div>
      </v-expand-transition>
    </v-card>

  </div>
</template>

<script>
  export default {
    name: "Card",
    data(){
      return {
        show: false,
      }
    },
    props:{
      dailySentence: {
        type: Object,
        default(){
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .margin-bottom-sm{
    margin-bottom: 60px!important;
  }
</style>